<template>
  <div class="homepage">
    <!-- 顶部导航 -->
<!--    <nav class="navbar">-->
<!--      <div class="nav-container">-->
<!--        <div class="logo">-->
<!--          <h1>和通AI教育平台</h1>-->
<!--        </div>-->
<!--        <div class="nav-links">-->
<!--          <a href="#" class="nav-link">首页</a>-->
<!--          <a href="#" class="nav-link">课程</a>-->
<!--          <a href="#" class="nav-link">直播</a>-->
<!--          <a href="#" class="nav-link">论文</a>-->
<!--          <a href="#" class="nav-link">新闻</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </nav>-->

    <!-- 主要内容区域 -->
    <div class="main-container">
      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">探索AI时代的学习新境界</h1>
          <p class="hero-subtitle">汇聚前沿技术课程，打造智能学习生态</p>
          <div class="hero-stats">
            <div class="stat-item">
              <span class="stat-number">10,000+</span>
              <span class="stat-label">优质课程</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">500+</span>
              <span class="stat-label">专业讲师</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">1M+</span>
              <span class="stat-label">学习用户</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 正在直播模块 -->
      <section class="live-section">
        <div class="section-header">
          <h2 class="section-title">🔴 正在直播</h2>
          <span class="live-indicator">LIVE</span>
        </div>
        <div class="live-grid">
          <div class="live-card" v-for="live in liveStreams" :key="live.id">
            <div class="live-thumbnail">
              <img :src="live.thumbnail" :alt="live.title" />
              <div class="live-badge">直播中</div>
              <div class="viewer-count">{{ live.viewers }}人观看</div>
            </div>
            <div class="live-info">
              <h3 class="live-title">{{ live.title }}</h3>
              <p class="live-instructor">{{ live.instructor }}</p>
              <div class="live-meta">
                <span class="live-category">{{ live.category }}</span>
                <span class="live-time">{{ live.startTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 推荐课程模块 -->
      <section class="recommended-section">
        <div class="section-header">
          <h2 class="section-title">🎯 为您推荐</h2>
          <p class="section-subtitle">基于您的学习偏好精心挑选</p>
        </div>
        <div class="course-grid">
          <div class="course-card featured" v-for="course in recommendedCourses" :key="course.id">
            <div class="course-thumbnail">
              <img :src="course.thumbnail" :alt="course.title" />
              <div class="course-duration">{{ course.duration }}</div>
            </div>
            <div class="course-content">
              <div class="course-category">{{ course.category }}</div>
              <h3 class="course-title">{{ course.title }}</h3>
              <p class="course-description">{{ course.description }}</p>
              <div class="course-meta">
                <div class="instructor">
                  <img :src="course.instructorAvatar" :alt="course.instructor" />
                  <span>{{ course.instructor }}</span>
                </div>
                <div class="course-stats">
                  <span class="rating">⭐ {{ course.rating }}</span>
                  <span class="students">{{ course.students }}人学习</span>
                </div>
              </div>
              <div class="course-price">
                <span class="current-price">¥{{ course.price }}</span>
                <span class="original-price">¥{{ course.originalPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 热门课程模块 -->
      <section class="popular-section">
        <div class="section-header">
          <h2 class="section-title">🔥 热门课程</h2>
          <div class="filter-tabs">
            <button class="filter-tab active">全部</button>
            <button class="filter-tab">机器学习</button>
            <button class="filter-tab">深度学习</button>
            <button class="filter-tab">计算机视觉</button>
          </div>
        </div>
        <div class="popular-grid">
          <div class="popular-card" v-for="course in popularCourses" :key="course.id">
            <div class="rank-badge">{{ course.rank }}</div>
            <img :src="course.thumbnail" :alt="course.title" class="popular-thumbnail" />
            <div class="popular-content">
              <h3 class="popular-title">{{ course.title }}</h3>
              <p class="popular-instructor">{{ course.instructor }}</p>
              <div class="popular-stats">
                <span class="views">{{ course.views }}次观看</span>
                <span class="rating">{{ course.rating }}分</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 录播课程模块 -->
      <section class="recorded-section">
        <div class="section-header">
          <h2 class="section-title">📚 精品录播</h2>
          <p class="section-subtitle">系统化学习路径，随时随地提升技能</p>
        </div>
        <div class="recorded-categories">
          <div class="category-card" v-for="category in recordedCategories" :key="category.id">
            <div class="category-icon">{{ category.icon }}</div>
            <h3 class="category-name">{{ category.name }}</h3>
            <p class="category-description">{{ category.description }}</p>
            <div class="category-stats">
              <span>{{ category.courseCount }}门课程</span>
              <span>{{ category.totalHours }}小时</span>
            </div>
            <button class="category-btn">开始学习</button>
          </div>
        </div>
      </section>

      <!-- 新闻资讯模块 -->
      <section class="news-section">
        <div class="section-header">
          <h2 class="section-title">📰 行业资讯</h2>
          <a href="#" class="more-link">查看更多</a>
        </div>
        <div class="news-grid">
          <div class="news-card main-news">
            <img :src="mainNews.image" :alt="mainNews.title" />
            <div class="news-content">
              <div class="news-category">{{ mainNews.category }}</div>
              <h3 class="news-title">{{ mainNews.title }}</h3>
              <p class="news-excerpt">{{ mainNews.excerpt }}</p>
              <div class="news-meta">
                <span class="news-date">{{ mainNews.date }}</span>
                <span class="news-views">{{ mainNews.views }}阅读</span>
              </div>
            </div>
          </div>
          <div class="news-list">
            <div class="news-item" v-for="news in newsList" :key="news.id">
              <img :src="news.image" :alt="news.title" />
              <div class="news-info">
                <h4 class="news-title">{{ news.title }}</h4>
                <div class="news-meta">
                  <span class="news-date">{{ news.date }}</span>
                  <span class="news-category">{{ news.category }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 论文研究模块 -->
      <section class="papers-section">
        <div class="section-header">
          <h2 class="section-title">🔬 前沿论文</h2>
          <p class="section-subtitle">追踪最新研究成果，把握技术发展趋势</p>
        </div>
        <div class="papers-grid">
          <div class="paper-card" v-for="paper in papers" :key="paper.id">
            <div class="paper-header">
              <div class="paper-category">{{ paper.category }}</div>
              <div class="paper-date">{{ paper.publishDate }}</div>
            </div>
            <h3 class="paper-title">{{ paper.title }}</h3>
            <p class="paper-abstract">{{ paper.abstract }}</p>
            <div class="paper-authors">
              <span v-for="author in paper.authors" :key="author" class="author">{{ author }}</span>
            </div>
            <div class="paper-stats">
              <span class="citations">引用: {{ paper.citations }}</span>
              <span class="downloads">下载: {{ paper.downloads }}</span>
            </div>
            <div class="paper-actions">
              <button class="paper-btn primary">阅读全文</button>
              <button class="paper-btn secondary">收藏</button>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>AI智学堂</h3>
          <p>引领AI时代的在线教育平台</p>
        </div>
        <div class="footer-section">
          <h4>课程分类</h4>
          <ul>
            <li><a href="#">机器学习</a></li>
            <li><a href="#">深度学习</a></li>
            <li><a href="#">计算机视觉</a></li>
            <li><a href="#">自然语言处理</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>服务支持</h4>
          <ul>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">意见反馈</a></li>
            <li><a href="#">服务条款</a></li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import bg1 from '@/assets/images/ls/1.jpg';
  import bg2 from '@/assets/images/ls/2.jpg';
  import bg3 from '@/assets/images/ls/3.jpg';
  import bg4 from '@/assets/images/ls/4.jpg';
  import bg5 from '@/assets/images/ls/5.jpg';
  import bg6 from '@/assets/images/ls/6.jpg';
  import bg7 from '@/assets/images/ls/7.jpg';
  import bg8 from '@/assets/images/ls/8.jpg';
  import bg9 from '@/assets/images/ls/9.jpg';
  import bg10 from '@/assets/images/ls/10.jpg';
  import bg11 from '@/assets/images/ls/11.jpg';
  import bg12 from '@/assets/images/ls/12.jpg';

  // 直播数据
  const liveStreams = ref([
    {
      id: 1,
      title: 'GPT-4原理深度解析与实战应用',
      instructor: '张教授',
      thumbnail: bg4,
      viewers: 1234,
      category: '大语言模型',
      startTime: '19:30开始',
    },
    {
      id: 2,
      title: '计算机视觉前沿技术分享',
      instructor: '李博士',
      thumbnail: bg7,
      viewers: 856,
      category: '计算机视觉',
      startTime: '20:00开始',
    },
    {
      id: 3,
      title: '强化学习算法实战训练营',
      instructor: '王老师',
      thumbnail: bg9,
      viewers: 642,
      category: '强化学习',
      startTime: '21:00开始',
    },
  ]);

  // 推荐课程数据
  const recommendedCourses = ref([
    {
      id: 1,
      title: 'PyTorch深度学习实战：从入门到精通',
      description: '全面掌握PyTorch框架，构建深度学习模型，解决实际问题',
      thumbnail: '/placeholder.svg?height=200&width=350',
      instructor: '陈教授',
      instructorAvatar: '/placeholder.svg?height=40&width=40',
      category: '深度学习',
      duration: '48小时',
      rating: 4.9,
      students: 12580,
      price: 299,
      originalPrice: 599,
    },
    {
      id: 2,
      title: 'Transformer架构详解与BERT实现',
      description: '深入理解Transformer原理，手把手实现BERT模型',
      thumbnail: '/placeholder.svg?height=200&width=350',
      instructor: '刘博士',
      instructorAvatar: '/placeholder.svg?height=40&width=40',
      category: '自然语言处理',
      duration: '36小时',
      rating: 4.8,
      students: 8960,
      price: 399,
      originalPrice: 799,
    },
  ]);

  // 热门课程数据
  const popularCourses = ref([
    {
      id: 1,
      rank: 1,
      title: '机器学习算法全解析',
      instructor: '吴恩达',
      thumbnail: '/placeholder.svg?height=120&width=200',
      views: '156万',
      rating: 4.9,
    },
    {
      id: 2,
      rank: 2,
      title: 'Python数据科学实战',
      instructor: '李飞飞',
      thumbnail: '/placeholder.svg?height=120&width=200',
      views: '128万',
      rating: 4.8,
    },
    {
      id: 3,
      rank: 3,
      title: 'TensorFlow 2.0完整教程',
      instructor: '谷歌团队',
      thumbnail: '/placeholder.svg?height=120&width=200',
      views: '95万',
      rating: 4.7,
    },
  ]);

  // 录播分类数据
  const recordedCategories = ref([
    {
      id: 1,
      name: '机器学习基础',
      icon: '🤖',
      description: '从零开始学习机器学习核心概念和算法',
      courseCount: 25,
      totalHours: 120,
    },
    {
      id: 2,
      name: '深度学习进阶',
      icon: '🧠',
      description: '掌握神经网络和深度学习前沿技术',
      courseCount: 18,
      totalHours: 96,
    },
    {
      id: 3,
      name: '计算机视觉',
      icon: '👁️',
      description: '图像处理、目标检测、人脸识别等应用',
      courseCount: 22,
      totalHours: 88,
    },
    {
      id: 4,
      name: '自然语言处理',
      icon: '💬',
      description: '文本分析、语言模型、对话系统开发',
      courseCount: 16,
      totalHours: 72,
    },
  ]);

  // 主要新闻
  const mainNews = ref({
    id: 1,
    title: 'OpenAI发布GPT-5：多模态能力再次突破',
    excerpt:
      '最新发布的GPT-5在理解能力、推理能力和创造性方面都有显著提升，支持更复杂的多模态交互...',
    image: '/placeholder.svg?height=300&width=500',
    category: 'AI前沿',
    date: '2024-01-15',
    views: '25.6万',
  });

  // 新闻列表
  const newsList = ref([
    {
      id: 2,
      title: '谷歌Gemini Ultra在多项基准测试中超越GPT-4',
      image: '/placeholder.svg?height=80&width=120',
      date: '2024-01-12',
      category: '技术评测',
    },
    {
      id: 3,
      title: '清华大学发布新一代对话机器人ChatGLM-4',
      image: '/placeholder.svg?height=80&width=120',
      date: '2024-01-10',
      category: '学术研究',
    },
    {
      id: 4,
      title: 'Meta开源Llama 3：性能媲美商业模型',
      image: '/placeholder.svg?height=80&width=120',
      date: '2024-01-08',
      category: '开源项目',
    },
  ]);

  // 论文数据
  const papers = ref([
    {
      id: 1,
      title: 'Attention Is All You Need: Transformer架构的革命性突破',
      abstract:
        '本文提出了Transformer架构，完全基于注意力机制，在机器翻译任务上取得了突破性成果...',
      authors: ['Vaswani, A.', 'Shazeer, N.', 'Parmar, N.'],
      category: '深度学习',
      publishDate: '2024-01-10',
      citations: 45678,
      downloads: 12890,
    },
    {
      id: 2,
      title: 'BERT: Pre-training of Deep Bidirectional Transformers',
      abstract: '通过双向Transformer的预训练，BERT在多个NLP任务上刷新了性能记录...',
      authors: ['Devlin, J.', 'Chang, M.', 'Lee, K.'],
      category: '自然语言处理',
      publishDate: '2024-01-08',
      citations: 38924,
      downloads: 9876,
    },
    {
      id: 3,
      title: 'ResNet: Deep Residual Learning for Image Recognition',
      abstract: '残差网络解决了深度神经网络训练中的梯度消失问题，使得训练更深的网络成为可能...',
      authors: ['He, K.', 'Zhang, X.', 'Ren, S.'],
      category: '计算机视觉',
      publishDate: '2024-01-05',
      citations: 52341,
      downloads: 15432,
    },
  ]);

  onMounted(() => {
    // 页面加载完成后的初始化逻辑
    console.log('首页加载完成');
  });
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .homepage {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }

  /* 导航栏 */
  .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
  }

  .logo h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
    font-weight: 700;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .nav-link:hover {
    color: #667eea;
  }

  /* 主容器 */
  .main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* 英雄区域 */
  .hero-section {
    text-align: center;
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 20px;
    margin: 2rem 0;
  }

  .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 3rem;
  }

  .hero-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
  }

  .stat-item {
    text-align: center;
  }

  .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
  }

  .stat-label {
    color: #666;
    font-size: 1rem;
  }

  /* 通用区域样式 */
  section {
    margin: 4rem 0;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
  }

  .section-subtitle {
    color: #666;
    font-size: 1.1rem;
  }

  /* 直播区域 */
  .live-section {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    padding: 3rem;
    border-radius: 20px;
    color: white;
  }

  .live-section .section-title {
    color: white;
  }

  .live-indicator {
    background: #ff4757;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

  .live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }

  .live-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
  }

  .live-card:hover {
    transform: translateY(-5px);
  }

  .live-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
  }

  .live-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4757;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .viewer-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
  }

  .live-info {
    padding: 1.5rem;
  }

  .live-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .live-instructor {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
  }

  .live-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
  }

  /* 推荐课程区域 */
  .recommended-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem;
    border-radius: 20px;
    color: white;
  }

  .recommended-section .section-title,
  .recommended-section .section-subtitle {
    color: white;
  }

  .course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
  }

  .course-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
  }

  .course-card:hover {
    transform: translateY(-5px);
  }

  .course-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
  }

  .course-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .course-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
  }

  .course-content {
    padding: 1.5rem;
  }

  .course-category {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .course-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
  }

  .course-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  .course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .instructor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .instructor img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .course-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .course-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .current-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
  }

  .original-price {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.6);
  }

  /* 热门课程区域 */
  .popular-section {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    padding: 3rem;
    border-radius: 20px;
  }

  .filter-tabs {
    display: flex;
    gap: 1rem;
  }

  .filter-tab {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .filter-tab.active,
  .filter-tab:hover {
    background: white;
    color: #fc7f5f;
    font-weight: 600;
  }

  .popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .popular-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .popular-card:hover {
    transform: translateY(-3px);
  }

  .rank-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
  }

  .popular-thumbnail {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
  }

  .popular-content {
    flex: 1;
  }

  .popular-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #333;
  }

  .popular-instructor {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .popular-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #999;
  }

  /* 录播课程区域 */
  .recorded-section {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    padding: 3rem;
    border-radius: 20px;
  }

  .recorded-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }

  .category-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .category-card:hover {
    transform: translateY(-5px);
  }

  .category-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .category-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #333;
  }

  .category-description {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  .category-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #999;
  }

  .category-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.3s ease;
  }

  .category-btn:hover {
    transform: translateY(-2px);
  }

  /* 新闻区域 */
  .news-section {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .more-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
  }

  .news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }

  .main-news {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .main-news img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .news-content {
    padding: 1.5rem;
  }

  .news-category {
    background: #667eea;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .news-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #333;
  }

  .news-excerpt {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #999;
  }

  .news-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .news-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .news-item:hover {
    background: #e9ecef;
  }

  .news-item img {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
  }

  .news-info {
    flex: 1;
  }

  .news-item .news-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .news-item .news-meta {
    font-size: 0.8rem;
  }

  /* 论文区域 */
  .papers-section {
    background: linear-gradient(135deg, #e3ffe7 0%, #d9e7ff 100%);
    padding: 3rem;
    border-radius: 20px;
  }

  .papers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }

  .paper-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .paper-card:hover {
    transform: translateY(-5px);
  }

  .paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .paper-category {
    background: #667eea;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
  }

  .paper-date {
    color: #999;
    font-size: 0.9rem;
  }

  .paper-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
    line-height: 1.4;
  }

  .paper-abstract {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .paper-authors {
    margin-bottom: 1rem;
  }

  .author {
    background: #f8f9fa;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    color: #666;
  }

  .paper-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #999;
  }

  .paper-actions {
    display: flex;
    gap: 1rem;
  }

  .paper-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: transform 0.3s ease;
  }

  .paper-btn:hover {
    transform: translateY(-2px);
  }

  .paper-btn.primary {
    background: #667eea;
    color: white;
  }

  .paper-btn.secondary {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #ddd;
  }

  /* 页脚 */
  .footer {
    background: #2c3e50;
    color: white;
    padding: 3rem 0;
    margin-top: 4rem;
  }

  .footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }

  .footer-section h3,
  .footer-section h4 {
    margin-bottom: 1rem;
  }

  .footer-section ul {
    list-style: none;
  }

  .footer-section ul li {
    margin-bottom: 0.5rem;
  }

  .footer-section a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .footer-section a:hover {
    color: white;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .main-container {
      padding: 0 1rem;
    }

    .hero-title {
      font-size: 2.5rem;
    }

    .hero-stats {
      flex-direction: column;
      gap: 2rem;
    }

    .news-grid {
      grid-template-columns: 1fr;
    }

    .nav-links {
      display: none;
    }

    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .filter-tabs {
      flex-wrap: wrap;
    }
  }
</style>
